<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        backgroundColor: '#2E323C',
        title: {
          text: '20',
          subtext: '项目总数',
          textAlign: 'center',
          left: '49%', // 主标题保持居中定位
          top: '45%',
          textStyle: {
            color: '#fff',
            fontSize: 20,
            fontWeight: 'bold',
            align: 'center',
          },
          subtextStyle: {
            color: '#94A0B8',
            fontSize: 16,
            // left: '40%',
            //   align: 'center',
            align: 'left', // 左对齐基准
            padding: [2, 0, 0, 28], // 左上右下（向左28px偏移）
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%'],
            silent: true,
            //  startAngle: 90,
            data: [
              {
              //  value: 75, // 示例进度值
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FFA726', // 橙色渐变
                      },
                      {
                        offset: 1,
                        color: '#FB8C00',
                      },
                    ],
                  },
                  borderWidth: 1,
                  borderColor: 'rgba(255,255,255,0.2)',
                },
              },
              {
                value: 25, // 剩余部分
                itemStyle: {
                  color: 'rgba(255,255,255,0.05)',
                },
              },
            ],
          },
          // 内圆核心
          {
            type: 'pie',
            radius: '28%',
            silent: true,
            label: { show: false },
            data: [
              {
                value: 1,
                itemStyle: {
                  //color: 'rgba(255,255,255,0.05)', // 浅色内圆
                  color: 'rgb(21, 66, 95)',
                  borderColor: 'rgba(255,255,255,0.15)',
                  borderWidth: 1,
                },
              },
            ],
          },

          // 细外环（主数据环）
          {
            type: 'pie',
            radius: ['62%', '67%'], // 3%宽度的细环
            startAngle: 90,
            silent: true,
            data: [
              {
                value: 14,
                label: { show: false },
                //  name: '进行中',
                itemStyle: {
                  color: {
                    type: 'linear',
                    // x: 0,
                    // y: 0,
                    // x2: 0,
                    // y2: 1,
                    colorStops: [
                      { offset: 0, color: '#4A8BFA' },
                      { offset: 1, color: '#325BFF' },
                    ],
                  },
                  borderWidth: 4,
                  //   borderRadius: 10,
                  borderColor: 'rgb(18, 61, 90)',
                  //  shadowBlur: 10,
                  shadowColor: 'rgba(67, 136, 255, 0.6)',
                },
              },
              {
                value: 4,
                label: { show: false },
                // name: '已完成',
                itemStyle: {
                  color: {
                    type: 'linear',
                    // x: 0,
                    // y: 0,
                    // x2: 0,
                    // y2: 1,
                    colorStops: [
                      { offset: 0, color: '#26C6DA' },
                      { offset: 1, color: '#0097A7' },
                    ],
                  },
                  borderWidth: 4,
                  borderColor: 'rgb(18, 61, 90)',
                  label: { show: false },
                },
              },
              {
                value: 4,
                label: { show: false },
                //  name: '已完成2',
                itemStyle: {
                  color: {
                    type: 'linear',
                    // x: 0,
                    // y: 0,
                    // x2: 0,
                    // y2: 1,
                    colorStops: [
                      { offset: 0, color: 'orange' },
                      { offset: 1, color: '#0097A7' },
                    ],
                  },
                  borderWidth: 4,
                  borderColor: 'rgb(18, 61, 90)',
                },
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
